<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body" >
        <div class="d-flex jc-center">
          <dv-decoration-10 style="width:33.3%;height:.0625rem;"/>
          <div class="d-flex jc-center">
            <dv-decoration-8 :color="['#568aea', '#000000']" style="width:1rem;height:.625rem;"/>
            <div class="title" style="padding-top:.2rem;">
              <span class="title-text">{{ project }}-内测质量可视化平台</span>
              <dv-decoration-6
                  class="title-bototm"
                  :reverse="true"
                  :color="['#50e3c2', '#67a1e5']"
                  style="padding-top:.15rem;width:6.125rem;height:.1rem;"
              />
            </div>
            <dv-decoration-8
                :reverse="true"
                :color="['#568aea', '#000000']"
                style="width:1rem;height:.625rem;"
            />
          </div>
          <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);"/>
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between">
          <div class="d-flex" style="width: 25%">
            <div
                class="react-right ml-4"
                style="width: 6.25rem; text-align: left;background-color: #0f1325;"
            >
              <span class="react-before"></span>
<!--              <span class="text">当前测试阶段：首轮测试</span>-->
              <timeLine/>
            </div>
            <!-- <div class="react-right ml-3" style="width: 40%;background-color: #0f1325;">
              <span class="text colorBlue"></span>
            </div> -->
          </div>
          <div style="width: 25%" class="d-flex">
            <div class="react-left colorBlue mr-3">
              <span class="text fw-b"></span>
            </div>
            <div
                class="react-left mr-4"
                style="width: 6.25rem; background-color: #0f1325;" 
              >
            <div>
              <select v-model="projectSelect" style="background:#CCFFFF;float:left;opacity:0.8" @change="changeProject()">
                <option value="" style="background:#CCFFFF;opacity:0.8">--- 请选择项目 ---</option>
                <option v-for="item in allproject" :key="item" style="background:#CCFFFF;opacity:0.8">{{item}}</option>
              </select>
            </div>
            <div style="text-align: right;" >
              <span class="react-after"></span>
              <span class="text" >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
            </div>
            </div>
          </div>
        </div>
        <div class="body-box">
          <!--   主体内容   -->
          <div class="content-box">
            <!--      左边 3块     -->
            <!-- 左上-->
            <!-- <dv-border-box-12>dv-border-box-12</dv-border-box-12> -->
            <dv-border-box-12 class="l1">
              <leftTop/>
            </dv-border-box-12>
            <!-- 左中-->
            <dv-border-box-12 class="l2">
              <leftMid/>
            </dv-border-box-12>
            <!-- 左下-->
            <dv-border-box-12 class="l3">
              <leftBottom/>
            </dv-border-box-12>
            <!-- 中间 2块 -->
            <dv-border-box-12 class="c1">
              <centerTop/>
            </dv-border-box-12>
            <dv-border-box-12 class="c2">
              <centerBottom/>
            </dv-border-box-12>
            <!-- 右边 -->
            <dv-border-box-12 class="r1">
              <rightTop/>
            </dv-border-box-12>
            <dv-border-box-12 class="r2">
              <rightBottom/>
            </dv-border-box-12>
            <dv-border-box-12 class="r3">
              <rightMid1/>
            </dv-border-box-12>
            <dv-border-box-12 class="r4">
              <rightMid2/>
            </dv-border-box-12>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import {formatTime} from '../utils/index.js';
import leftTop from "./leftTop";
import leftMid from "./leftMid";
import leftBottom from "./leftBottom";
import centerTop from "./centerTop";
import centerBottom from "./centerBottom"
import rightTop from "./rightTop";
import rightMid1 from "./rightMid1";
import rightMid2 from "./rightMid2";
import rightBottom from "./rightBottom";
import timeLine from "./timeLine";
import global from '../utils/global.js';

// setTimeout(window.location.href='http://www.baidu.com',30);
export default {
  data() {
    return {
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      project: this.$route.query.project.toUpperCase(),
      allproject:[],
      // allprojects:[{project:"RG-SCP-IIB_2.00"}, {project:"SCVOS5.3R1P1"}],
      projectSelect:'',
    };
  },
  components: {
    leftTop,
    leftMid,
    leftBottom,
    centerTop,
    centerBottom,
    rightTop,
    rightMid1,
    rightMid2,
    rightBottom,
    timeLine,
  },
  mounted() {
    this.timeFn();
    this.getAllProject();
    this.cancelLoading();
    this.refer();
  },
  methods: {
    timeFn() {
      setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss');
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000)
    },
    getAllProject() {
      this.$http({ method: 'get',
                    url: 'show/allProject',}).then(response => {
                    // console.log(response.data);
                    this.allproject =response.data.showProject;
                    // console.log(this.allproject)
                    },);
    },
    refer(){
      var count = 0
      if(this.$route.query.count){
        count = Number(this.$route.query.count)
      }
      setInterval(() => {
         if(count < this.allproject.length-1){
           count = count +1
         }
         else{
           count = 0
         }
         var project = this.allproject[count]
         location = global.webHost+"?project="+project+'&count='+count
      },360000)
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    changeProject() {
      console.log(global.webHost)
      location = global.webHost+"?project="+this.projectSelect
    },
  }
};
</script>

<style lang="scss">
@import '../assets/scss/index.scss';

</style>